<style scoped>
table{
    color: #fff;
    font-size: 20px;
    line-height: 36px;
    border-spacing: 0;
  border-collapse: collapse;
}
table td{
    color: #fff;
    padding: 0 10px;
}

</style>
<template>
    <div>
        <table ref="MulColumnTable" width="100%" v-html="tableHtml" :class="tableClass" :border="borderColor?1:0" :borderColor="borderColor"></table>
    </div>
</template>
<script>
export default {
    name:'MulColumnTable',
    props:{
        tableClass:{
            type: String | Array
        },
        url:String,
        params:  Object,
        data:  Object,
        reslt:Number,
        colsNum:{
            type: Number,
            default: 2
        },
        columns: Array,
        labelWidth: String||Number,
        labelAlign: {
            type: String,
            default:'left'
        },
        thClass:{
            type: String,
            default:''
        },
        tdClass:{
            type: String,
            default:''
        },
        borderColor:String
    },
    data(){
        return {
            tableHtml:'',
            tableData:[]
        }
    },
    watch:{
        data:{
            handler: function (val) {
                this.data = val;
                this.init();
            },
            deep: true
        },
        columns:{
            handler: function (val) {
                this.init();
            },
            deep: true
        }
    },
    methods:{
        init(){
            if(!this.data){
                this.getData();
            }else{
                this.tableData = this.data;
                this.setData(this.columns,this.tableData,this.colsNum)
            }
            
        },
        getData(){
          axios({
            url:  this.url,
            method: 'post',
            params: this.params
          }).then(res=>{
            if(res.data){
              console.log(res.data);
              if(this.reslt==1){
                this.tableData=res.data
              }else{
                this.tableData = res.data.data;
              }
              this.setData(this.columns,this.tableData,this.colsNum)
            }
          })
        },
        
        setData(colArr, obj,colsNum){
            var html = '';
                colArr = colArr||[];
                obj = obj||{};
            colArr.map((colItem,i)=>{
                let tdValue = (obj[colItem.field]||'') + (colItem.suffix ? colItem.suffix : '');
                let tdHTML = (colItem.tdClass?'<div class="'+colItem.tdClass+'">'+tdValue+'</div>':tdValue);
                if(colItem.type == 'img'){
                    tdHTML = '<img src="'+tdValue+'" height="90"/>'
                }
                if(colItem.fit){
                    html += '<tr>';
                    html += '<td style="width:'+(this.labelWidth||'auto')+';text-align:'+(this.labelAlign)+';" class="'+this.thClass+'">' + colItem.title + '</td>';
                    html += '<td colspan='+(2*colsNum - 1)+' style="text-align:left;" class="'+this.tdClass+'">' + tdHTML + '</td>';
                    html += '</tr>'
                }else{
                    if (i % colsNum == 0) {
                        html += '<tr>';
                        html += '<td style="width:'+(this.labelWidth||'auto')+';text-align:'+(this.labelAlign)+';" class="'+this.thClass+'">' + colItem.title + '</td>';
                        if (i == colArr.length - 1) {
                            html += '<td colspan='+(2*colsNum - 1)+' style="text-align:left;" class="'+this.tdClass+'">' + tdHTML + '</td>';
                        } else {
                            html += '<td style="text-align:left;" class="'+this.tdClass+'">' + tdHTML + '</td>';
                        }
                    } else {
                        html += '<td style="width:'+(this.labelWidth||'auto')+';text-align:'+(this.labelAlign)+';" class="'+this.thClass+'">' + colItem.title + '</td>';
                        html += '<td style="text-align:left;" class="'+this.tdClass+'">' + tdHTML + '</td>';
                        
                    }
                    if((i+1) % colsNum == 0){
                    html += '</tr>'
                }
                }
                
            })
            this.tableHtml = html;
        }
            
    },
    created(){
        this.init();
    }

}
</script>
